<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="logo-container">
        <image class="logo" src="/static/logo6.gif" mode="aspectFit"></image>
        <text class="logo-text">大学生心理健康服务平台</text>
      </view>
      <view class="nav">
        <text class="nav-item">联系我们</text>
      </view>
    </view>
    
    <!-- 主要内容区 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 欢迎横幅 -->
      <view class="banner">
        <image class="banner-image" src="https://ts2.tc.mm.bing.net/th/id/OIP-C._Gfb0mfWpLEcqFLqXg1l_wHaNJ" mode="​scaleToFill" ></image>
        <view class="banner-overlay">
          <text class="banner-title">关爱心灵，健康成长</text>
          <text class="banner-subtitle">专业心理咨询服务，为你的大学生活保驾护航</text>
        </view>
      </view>
      
      <!-- 主要内容容器 - 修改为左右布局 -->
      <view class="content-wrapper">
        <!-- 左边服务特色区 -->
        <view class="services-section">
          <view class="services-list">
            <view 
              class="service-card"
              v-for="(item, index) in features" 
              :key="index"
              @mouseover="hoverCard(index)"
              @mouseout="unhoverCard(index)"
              :class="{'hover': activeIndex === index}"
            >
              <view class="service-icon-container">
                <image class="service-icon" :src="item.icon" mode="aspectFill"></image>
              </view>
              <view class="service-content">
                <text class="service-title">{{ item.title }}</text>
                <text class="service-desc">{{ item.desc }}</text>
                <view class="service-details">
                  <text class="service-detail-item" v-for="(detail, i) in item.details" :key="i">{{ detail }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
          
        <view class="tt"></view>
        
        <!-- 右边登录注册区 -->
        <view class="card-container">
          <!-- 登录卡片 -->
          <view 
            class="card login-card" 
            :class="{'front': isLogin, 'back': !isLogin}"
            :animation="loginAnimation"
          >
            <view class="card-content">
              <text class="title">欢迎回来</text>
              <view class="input-container">
                <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isUsernameFocused || username}">学号/工号</text>
                  <input 
                    class="input" 
                    @focus="handleFocus('username')" 
                    @blur="handleBlur('username')" 
                    v-model="username"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isUsernameFocused}"></view>
                </view>
                
                <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isPasswordFocused || password}">密码</text>
                  <input 
                    class="input" 
                    type="password" 
                    @focus="handleFocus('password')" 
                    @blur="handleBlur('password')" 
                    v-model="password"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isPasswordFocused}"></view>
                </view>
              </view>
              
              <!-- 记住密码 & 忘记密码 -->
              <view class="remember-forgot">
                <label class="remember-me">
                  <checkbox-group @change="handleRememberMe">
                    <checkbox :checked="rememberMe" color="#4a90e2" />
                    <text class="checkbox-text">自动登录</text>
                  </checkbox-group>
                </label>
                <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
              </view>
              
              <button class="btn" @click="handleLogin">登 录</button>
              <text class="notice" @click.stop="toggleCard">还没有账号？<text class="highlight">立即注册</text></text>
            </view>
          </view>
           
          <!-- 注册卡片 -->
          <view 
            class="card register-card" 
            :class="{'front': !isLogin, 'back': isLogin}"
            :animation="registerAnimation"
          >
            <view class="card-content">
              <text class="title">创建账号</text>
              <view class="input-container">
                <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isRegUsernameFocused || regUsername}">工号/学号</text>
                  <input 
                    class="input" 
                    @focus="handleFocus('regUsername')" 
                    @blur="handleBlur('regUsername')"
					@input="regUsername = $event.detail.value.replace(/\s/g, '')"
                    v-model.trim="regUsername"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isRegUsernameFocused}"></view>
                </view>
                
               <!-- <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isRealNameFocused || realName}">真实姓名</text>
                  <input 
                    class="input" 
                    @focus="handleFocus('realName')" 
                    @blur="handleBlur('realName')" 
                    v-model="realName"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isRealNameFocused}"></view>
                </view> -->
              </view>
              
              <!-- 身份选择区域 -->
              <view class="identity-selection">
                <text class="identity-label">注册身份：</text>
                <radio-group class="radio-group" @change="handleIdentityChange">
                  <label class="radio-label" v-for="item in identityOptions" :key="item.value">
                    <radio class="radio" :value="item.value" :checked="identity == item.value" color="#4a90e2" />
                    <text class="radio-text">{{item.label}}</text>
                  </label>
                </radio-group>
              </view>
              
              <view class="input-container">
                <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isRegPasswordFocused || regPassword}">密码</text>
                  <input 
                    class="input" 
                    type="password" 
                    @focus="handleFocus('regPassword')" 
                    @blur="handleBlur('regPassword')" 
                    v-model="regPassword"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isRegPasswordFocused}"></view>
                </view>
                
                <view class="input-wrapper">
                  <text class="placeholder" :class="{'active': isConfirmPasswordFocused || confirmPassword}">确认密码</text>
                  <input 
                    class="input" 
                    type="password" 
                    @focus="handleFocus('confirmPassword')" 
                    @blur="handleBlur('confirmPassword')" 
                    v-model="confirmPassword"
                  />
                  <view class="underline-bg"></view>
                  <view class="underline-animate" :class="{'active': isConfirmPasswordFocused}"></view>
                </view>
              </view>
              
              <button class="btn" @click="handleRegister">注 册</button>
              <text class="notice" @click.stop="toggleCard">已有账号？<text class="highlight">立即登录</text></text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部信息 -->
    <view class="footer">
      <view class="footer-links">
        <text class="footer-link">关于我们</text>
        <text class="footer-link">服务协议</text>
        <text class="footer-link">隐私政策</text>
        <text class="footer-link">帮助中心</text>
      </view>
      <text class="footer-text">©2025 大学生心理健康服务平台 版权所有</text>
      <text class="footer-text">心理援助热线: 123-456-7890 (24小时)</text>
    </view>
  </view>
</template>

<script>
	import methodY from '@/util/methodY.js';
export default {
  data() {
    return {
		isLogin: true,
		      rememberMe: false,
		      identity: '1',
		      identityOptions: [
		        { label: '学生', value:"1" },
		        { label: '教师', value:"2" },
		        { label: '管理员', value:"3" }
		      ],
		      // 登录表单
		      username: '',
		      password: '',
		      isUsernameFocused: false,
		      isPasswordFocused: false,
		      // 注册表单
		      regUsername: '',
		      realName: '',
		      regPassword: '',
		      confirmPassword: '',
		      isRegUsernameFocused: false,
		      isRealNameFocused: false,
		      isRegPasswordFocused: false,
		      isConfirmPasswordFocused: false,
		      // 动画
		      loginAnimation: {},
		      registerAnimation: {},
		activeIndex:-1,
      features: [
        {
          icon: "https://haowallpaper.com/link/common/file/getCroppingImg/16477395881414016",
          title: "心理测评",
          desc: "专业心理测试，了解自我",
          details: [
			"涵盖情绪、人格等多个维度",
            "专业的心理测评量表",
            "即时生成测评报告",
          ]
        },
        {
          icon: "https://haowallpaper.com/link/common/file/getCroppingImg/16615442655006080",
          title: "在线咨询",
          desc: "专业心理咨询师一对一",
          details: [
            "大学认证心理咨询师",
            "多种咨询方式可选",
            "严格保密制度",
          ]
        },
        {
          icon: "https://haowallpaper.com/link/common/file/getCroppingImg/16491081875115392",
          title: "心理数据分析",
          desc: "深度解析用户心理行为数据",
          details: [
			  "行为偏好与心理特征关联",
              "用户情绪波动趋势分析",
              "干预措施效果量化评估"
            ],
        },
        {
          icon: "https://haowallpaper.com/link/common/file/getCroppingImg/16535048088505728",
          title: "匿名树洞",
          desc: "同龄人分享交流",
          details: [
            "匿名安全交流环境",
            "专业版主引导讨论",
            "经验分享与互助",
          ]
        }
      ],
    }
  },
  created() {
  	const res=methodY.util.isAutoLogin()
	if(res==true){
		uni.reLaunch({
			url:"/pages/home/home"
		})
	}
  },
  methods: {
	  handleFocus(field) {
	        this[`is${field.charAt(0).toUpperCase() + field.slice(1)}Focused`] = true;
	      },
	      handleBlur(field) {
	        this[`is${field.charAt(0).toUpperCase() + field.slice(1)}Focused`] = false;
	      },
	  handleIdentityChange(e) {
	      this.identity = e.detail.value;
	      console.log('选择的身份:', this.identity);
	    },
	  handleRememberMe(){
		  this.rememberMe=true
	  },
	  handleForgotPassword() {
	        uni.showToast({
	          title: '请联系管理员重置密码',
	          icon: 'none'
	        });
	      },
	 toggleCard() {
	       const loginAnim = uni.createAnimation({
	         duration: 500,
	         timingFunction: 'ease',
	       });
	       const registerAnim = uni.createAnimation({
	         duration: 500,
	         timingFunction: 'ease',
	       });
	       if (this.isLogin) {
	         // 登录卡片移出，注册卡片移入
	         loginAnim.rotateY(-180).translateX('-100%').step();
	         registerAnim.translateX('-100%').step();
	       } else {
	         // 注册卡片移出，登录卡片移入
	         registerAnim.rotateY(-180).translateX('0').step();
			 loginAnim.rotateY(0).translateX('0').step();
	       }
	 
	       this.loginAnimation = loginAnim.export();
	       this.registerAnimation = registerAnim.export();
		   	this.isLogin = !this.isLogin;
	     },
    async handleLogin() {
		methodY.util.showLoading("登录中……");
		if(this.username.length==0||this.password.length==0){
				  methodY.util.showMsg("请填写全部信息",1000)
				  return
		}
        try {
            await methodY.util.login(this.username, this.password);
			if(this.rememberMe){
				const rememberMe=true;
				uni.setStorageSync("rememberMe",rememberMe);
			}
            uni.reLaunch({
              url: "/pages/home/home"
            });
          } catch (e) {
            console.error('登录失败:', e);
          }finally{
			methodY.util.closeLoading()  
		  }
    },
    async handleRegister() {
      if(this.regUsername.length==0||this.regPassword.length==0||this.confirmPassword.length==0){
		  methodY.util.showMsg("请填写全部信息",1000)
		  return
	  }
	  if(this.isLogin)return
	  if(this.regPassword!=this.confirmPassword){
		  methodY.util.showMsg("密码不一致",1000)
		  return
	  }
	  methodY.util.showLoading("注册中……")
	  try{
		  await methodY.util.register(this.regUsername,this.regPassword,Number(this.identity));
		  setTimeout(()=>{
			  this.toggleCard();
			  this.username=this.regUsername
			  this.password=this.regPassword
		  },200)
	  }catch(e){
		  console.error('注册失败:', e);
	  }finally{
		  methodY.util.closeLoading()
	  }
    },
	  
	   hoverCard(index) {
	      this.activeIndex = index;
	    },
	    unhoverCard(index) {
	      if (this.activeIndex === index) {
	        this.activeIndex = -1;
	      }
	    }
  }
}
</script>

<style lang="scss">
/* 主色调 */
$primary-color: #5e72e4;
$secondary-color: #11cdef;
$accent-color: #f5365c;
$text-color: #2d3748;
$light-bg: #f8f9fa;

/* ===== 全局样式 ===== */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f9fa;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* ===== 顶部导航 ===== */
.header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  background-color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .nav-item {
    margin-right: 0;
    font-size: 30rpx;
    color: #2d3748;
    transition: color 0.3s;
    
    &:hover {
      color: #5e72e4;
      cursor: pointer;
    }
  }
}

/* ===== 动态logo样式 ===== */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background: rgba(0,0,0,0.7);
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx rgba(0,0,0,0.5);
  
  .logo {
    width: 110rpx;
    height: 110rpx;
    margin-right: 20rpx;
    filter: drop-shadow(0 0 10rpx rgba(255,255,255,0.5));
  }
  
  .logo-text {
    font-size: 30rpx;
    font-weight: bold;
    font-family: 'Microsoft YaHei', sans-serif;
    background: linear-gradient(
      90deg,
      #ff00ff 0%,
      #ff1493 20%,
      #00ffff 40%,
      #00ff00 60%,
      #ffff00 80%,
      #ff00ff 100%
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 2.5s linear infinite;
    text-shadow: 0 0 10rpx rgba(255,255,255,0.3);
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
  }
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ===== 主要内容区 ===== */
.main-content {
  flex: 1;
}

/* ===== 横幅样式 ===== */
.banner {
  position: relative;
  height: 400rpx;
  margin-bottom: 40rpx;
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
  
  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 0 40rpx;
    
    .banner-title {
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
    
    .banner-subtitle {
      font-size: 32rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
  }
}

/* ===== 主要内容容器 ===== */
.content-wrapper {
  display: flex;
  padding: 40rpx;
  gap: 40rpx;
  align-items: stretch;
}

/* ===== 特色服务区域 ===== */
.tt {
  flex: 0.1;
}

.services-section {
  flex: 1.5;
  padding: 40rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.services-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 320rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.service-card.hover {
  transform: perspective(800rpx) rotateX(10deg) scale(1.03);
  box-shadow: 0 20rpx 40rpx rgba(94, 114, 228, 0.25);
  background: linear-gradient(145deg, #ffffff, #f0f4ff);
}

.service-icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.service-icon {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 3rpx solid white;
}

.service-card.hover .service-icon {
  transform: scale(1.15) translateY(-10rpx);
  box-shadow: 0 15rpx 40rpx rgba(94, 114, 228, 0.4);
}

.service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 2;
}

.service-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 12rpx;
  transition: all 0.3s ease;
}

.service-card.hover .service-title {
  transform: translateY(-10rpx);
  color: #5e72e4;
}

.service-desc {
  font-size: 26rpx;
  color: #666;
  height: 36rpx;
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.service-details {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  padding: 0 30rpx;
  opacity: 0;
  transform: translateY(20rpx);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  gap: 1rpx;
}

.service-detail-item {
  font-size: 10px;
  color: #666;
  line-height: 1.6;
  position: relative;
  transition: all 0.4s ease;
}

.service-detail-item::before {
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 8rpx;
  background: #5e72e4;
  border-radius: 50%;
  margin-right: 10rpx;
  vertical-align: middle;
}

.service-card.hover .service-desc {
  opacity: 0;
  height: 0;
  transform: translateY(-10rpx);
}

.service-card.hover .service-details {
  opacity: 1;
  transform: translateY(0);
}

.service-card.hover .service-detail-item:nth-child(1) {
  transition-delay: 0.15s;
}
.service-card.hover .service-detail-item:nth-child(2) {
  transition-delay: 0.25s;
}
.service-card.hover .service-detail-item:nth-child(3) {
  transition-delay: 0.35s;
}

/* ===== 登录注册区域 ===== */
.card-container {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  margin: 0 10rpx;
  justify-content: space-between;
  perspective: 1000px;
}

.card {
  height: 100%;
  width: 50%;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.2);
  background: white;
}

.login-card {
  transform: rotateY(0deg);
  flex: 1;
}

.register-card {
  transform: rotateY(180deg);
  flex: 1;
}

.register-card.back {
  pointer-events: none;
}

.login-card.back {
  pointer-events: none;
}

.front {
  transform: rotateY(0deg);
  filter: none;
  opacity: 1;
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
  filter: blur(4px);
  opacity: 0.7;
  z-index: 1;
}

.card-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
  color: #333;
}

/* ===== 输入框样式 ===== */
.input-container {
  margin-bottom: 0px;
}

.input-wrapper {
  position: relative;
  margin-bottom: 8px;
  
  .underline-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
  }
  
  .underline-animate {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #4a90e2;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &.active {
      width: 100%;
      left: 0;
      transform: translateX(0);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
}

.placeholder {
  position: absolute;
  left: 0;
  top: 15px;
  font-size: 15px;
  color: #999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.placeholder.active {
  top: -5px;
  font-size: 12px;
  color: #4a90e2;
}

.input {
  width: 100%;
  height: 30px;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.input:focus {
  border-color: #007AFF;
  box-shadow: 0 0 5px rgba(0, 122, 255, 0.5);
}

.btn {
  height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  transition: background-color 0.3s, transform 0.2s;
}

.notice {
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  margin-top: 10rpx;
}

.notice:hover {
  color: #0056b3;
  text-decoration: underline;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
  font-size: 28rpx;
}

.identity-selection {
  margin-bottom: 15rpx;
  width: 100%;
}

.identity-label {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.radio-group {
  display: flex;
  justify-content: space-between;
}

.radio-label {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.radio-text {
  font-size: 28rpx;
  margin-left: 10rpx;
  color: #333;
}

.remember-me {
  display: flex;
  align-items: center;
}

.forgot-password:hover {
  color: #4a90e2;
  text-decoration: underline;
}

/* ===== 底部信息 ===== */
.footer {
  background: white;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .footer-links {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    
    .footer-link {
      margin: 0 20rpx;
      font-size: 26rpx;
      color: #666;
      transition: color 0.3s;
      
      &:hover {
        color: #5e72e4;
        cursor: pointer;
      }
    }
  }
  
  .footer-text {
    display: block;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .services-list {
    grid-template-columns: 1fr !important;
  }
  
  .service-card {
    padding: 20rpx !important;
    
    .service-icon {
      width: 100rpx !important;
      height: 100rpx !important;
      margin-right: 20rpx !important;
    }
  }
}
</style>